<template>
  <section class="elec-wrapper">
      <div class="chart-box">
          <gauge-1 :echartsData="list" :id="id"></gauge-1>
      </div>
      <div class="percents-box">
          <div class="percent-box city">
              <div class="el-iconbox">
                  <svg-icon iconClass="electricty" class="el-icon"></svg-icon>
              </div>
              <div class="text">
                  <div><span class="text-num">99.9492</span>%</div>
                  <div>城网</div>
              </div>
               <a-progress :percent="99" :show-info="false" strokeWidth=4 strokeColor="#20debc" class="el-progress"/>
          </div>
          <div class="percent-box village">
              <div class="el-iconbox">
                  <svg-icon iconClass="electricty" class="el-icon"></svg-icon>
              </div>
              <div class="text">
                  <div><span class="text-num">99.7812</span>%</div>
                  <div>农网</div>
              </div>
               <a-progress :percent="99" :show-info="false" strokeWidth="4" strokeColor="#deb820" class="el-progress"/>
          </div>
      </div>

  </section>
</template>

<script>
import Gauge1 from '../../components/echarts/gauge1.vue';
export default {
  name:"Electricity",
  components: {
    Gauge1,
  },
  props: ["id", "list"],
  created() {
  },
  watch: {
    list: {
      handler(newVal) {
        if (newVal) {
          this.initData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  
  methods: {
    initData() {
      console.log(this.list,"Electricity");
    },
  },
};
</script>

<style lang="scss">
$fontColor1: #20debc;
$fontColor2: #deb820;
.elec-wrapper {
  width: 100%;
  height: 100%;
  display: flex;

  .chart-box{
      width: 50%;
      height: 100%;
  }
  .percents-box{
      width: 50%;
      margin-left: 10px;
      margin-top: 20px;
      .percent-box {
          margin-top: 30px;
      }
      .el-iconbox {
        background: url("../../assets/images/circleBG.png") no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        width: 40px;
        height: 40px;
        text-align: center;
      }
      .city .el-icon {
          color: $fontColor1;
      }
      .village .el-icon {
          color: $fontColor2;
      }
      .el-icon {
          font-size: 20px;
          height: 40px;
      }
      .text {
          width: 80%;
          display: inline-block;
          text-align: left;
          padding-left: 10px;
          font-size: 13px;

          .text-num {
              color: $fontColor1;
              font-size: 18px;
          }
      }
      .city .text-num {
          color: $fontColor1;
      }
      .village .text-num {
          color: $fontColor2;
      }
      .el-progress {
          padding: 0 80px 0px 10px;
      }
  }
}
</style>